import React from "react";
import {
    KeyboardAvoidingView,
    Platform,
    Pressable,
    StyleSheet,
    View,
    StyleProp,
    ViewStyle,
    TextStyle, Text
} from "react-native";
import {Icon} from "@rn-vui/themed";

const styles = StyleSheet.create({
    backdrop: {
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(0, 0, 0, .4)',
    },
    overlay: {
        backgroundColor: 'white',
        borderRadius: 5,
        padding: 20,
        ...Platform.select({
            android: {
                elevation: 2,
            },
            default: {
                shadowColor: 'rgba(0, 0, 0, .3)',
                shadowOffset: {width: 0, height: 1},
                shadowRadius: 4,
            },
        }),
        width: '80%',
        zIndex: 100
    },
    container: {
        width: '100%',
        height: '100%',
        alignItems: 'center',
        justifyContent: 'center'
    },
    close: {
        position: 'absolute',
        top: 5,
        right: 0
    }
});

interface OverLayerProps {
    children: React.ReactNode;
    onBackdropPress?: () => void;
    onPressOut?: () => void;
    onPressIn?: () => void;
    onLongPress?: () => void;
    backdropStyle?: StyleProp<ViewStyle>;
    overlayStyle?: StyleProp<ViewStyle>;
    keyboardViewBehavior?: "height" | "position" | "padding" | undefined;
}

const OverLayer = (props: OverLayerProps) => {
    const {
        children,
        onBackdropPress,
        onPressOut,
        onPressIn,
        onLongPress,
        backdropStyle,
        overlayStyle,
        keyboardViewBehavior,
        ...rest
    } = props;

    return (
        <View style={[StyleSheet.absoluteFill, {zIndex: 9999}]}>
            <Pressable
                style={StyleSheet.flatten([styles.backdrop, backdropStyle])}
                onPress={onBackdropPress}
                testID="RNE__Overlay__backdrop"
                {...{onPressOut, onPressIn, onLongPress}}
            />
            <KeyboardAvoidingView
                testID="RNE__Overlay__Container"
                pointerEvents="box-none"
                behavior={keyboardViewBehavior}
                style={styles.container}
            >
                <View
                    testID="RNE__Overlay"
                    style={StyleSheet.flatten([
                        styles.overlay,
                        overlayStyle,
                    ])}
                >{children}</View>
            </KeyboardAvoidingView>
        </View>
    );
};

OverLayer.displayName = 'OverLayer';
export default React.memo(OverLayer);

interface OverLayerHeaderProps {
    style?: StyleProp<ViewStyle>;
    title?: string;
    titleStyle?: StyleProp<TextStyle>;
    closeAble?: boolean;
    onPressClose?: () => void;
}

export const OverLayerHeader = React.memo((props: OverLayerHeaderProps) => {
    return (
        <View style={[
            {
                padding: 10,
                alignItems: 'center',
                justifyContent: 'center',
                marginBottom: 20
            },
            props.style
        ]}>
            <Text style={[
                {
                    fontSize: 24,
                    fontWeight: '600'
                },
                props.titleStyle
            ]}>{props.title}</Text>
            {
                props.closeAble ? (
                    <Pressable style={styles.close} onPress={() => props.onPressClose?.()}>
                        <Icon
                            name={'close'}
                            size={30}
                        />
                    </Pressable>
                ) : null
            }
        </View>
    )
}, (prevProps, nextProps) => prevProps.title === nextProps.title);
